<template>
	<view class="content">
		<image src="../../static/ranking/ranking-bg.png" mode="widthFix" class="bg-img"></image>
		<CustomNav :topBgColor="topBgColor" :color="titleColor" :backColor="'#999'" :isBack="true" :custom="custom"
			:title="'排行榜'"></CustomNav>
		<view class="title-item">
			<view class="title FangZhengHanZhenGuangBiaoJianTi">排行榜</view>
			<view class="name">积分排名</view>
		</view>
		<view class="info-block">
			<view class="info-item" v-for="(item,index) in list" :key="item.id">
				<view class="left-item">
					<image src="../../static/ranking/gold-medal.png" class="iconfont" v-if="index+1==1"></image>
					<image src="../../static/ranking/silver-medal.png" class="iconfont" v-else-if="index+1==2"></image>
					<image src="../../static/ranking/copper.png" class="iconfont" v-else-if="index+1==3"></image>
					<view class="ranking" v-else-if="index+1>3">{{index+1}}</view>
					<view class="title">{{item.userName}}</view>
				</view>
				<view class="score">{{item.score}}积分</view>
			</view>
		</view>
		<view class="bottom-block">
			<view class="info-item">
				<view v-if="info.sort>0" class="left-item">
					<image src="../../static/ranking/gold-medal.png" class="iconfont" v-if="info.sort==1"></image>
					<image src="../../static/ranking/silver-medal.png" class="iconfont" v-else-if="info.sort==2">
					</image>
					<image src="../../static/ranking/copper.png" class="iconfont" v-else-if="info.sort==3"></image>
					<view class="ranking" v-else-if="info.sort>3">{{info.sort+1}}</view>
					<view class="title">{{info.userName}}</view>
				</view>
				<view class="score">{{info.sort>0?info.score+'积分':'您还未参加活动'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getCustomNavData
	} from '@/util/util.js';
	import {
		getScoreListApi
	} from '@/api/ranking.js'
	import {
		getStorage
	} from '@/util/auth';
	export default {
		data() {
			return {
				custom: null,
				topBgColor: 'rgba(0,0,0,0)',
				titleColor: '#fff',
				list: [],
				info: {
					score: 0,
					userName: '',
					sort: ''
				}
			}
		},
		methods: {
			getList() {
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				getScoreListApi({}).then((res) => {
					uni.hideLoading()
					this.list = res.sortList ?? [];
					this.info = res.myScore ?? null;
				}).catch(() => {
					uni.hideLoading()
					this.showToast('加载失败')
				})
			}
		},
		onPageScroll(e) {
			if (e.scrollTop >= 50) {
				this.topBgColor = '#027BFD';
			} else {
				this.topBgColor = 'rgba(0,0,0,0)';
			}
		},
		onLoad() {
			this.custom = getCustomNavData();
			this.getList()
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F5F5;
	}

	.content {
		background: #F5F5F5;
		width: 100%;


		.bg-img {
			width: 100%;
		}

		.title-item {
			position: absolute;
			margin-top: -320rpx;
			display: flex;
			flex-direction: column;
			margin-left: 80rpx;

			.title {
				font-size: 70rpx;
				color: #fff;
			}

			.name {
				color: #fff;
				font-size: 32rpx;
				margin-top: 30rpx;
			}
		}

		.info-block {
			min-height: 60vh;
			display: flex;
			flex-direction: column;
			background: #F5F5F5;
			margin-top: -100rpx;
			border-radius: 60rpx;
			height: calc(100% - 160rpx);
			position: relative;
			padding: 30rpx;

			.info-item {
				background-color: #fff;
				height: 160rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 30rpx;
				align-items: center;
				border-radius: 20rpx;
				padding-left: 40rpx;

				.left-item {
					display: flex;
					flex-direction: row;
					align-items: center;

					.iconfont {
						width: 60rpx;
						height: 70rpx;
						margin-right: 30rpx;
					}

					.ranking {
						font-size: 46rpx;
						color: #999;
						margin-right: 30rpx;
						font-family: '宋体';
						font-weight: bold;
					}

					.title {
						font-size: 32rpx;
					}
				}

				.score {
					margin-right: 30rpx;
					color: #999;
				}
			}

			.info-item:nth-child(1) {
				background-color: #FDEBD7;
			}

			.info-item:nth-child(2) {
				background-color: #CEECF6;
			}

			.info-item:nth-child(3) {
				background-color: #DEE6FD;
			}

			.info-item:last-child {
				margin-bottom: 160rpx;

			}
		}

		.bottom-block {
			display: flex;
			flex-direction: column;
			border-radius: 60rpx;
			position: fixed;
			width: 100%;
			height: 160rpx;
			position: fixed;
			left: 0%;
			bottom: 10rpx;

			.info-item {
				background-color: #fff;
				width: 100%;
				height: 160rpx;
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				border-radius: 20rpx;
				padding-left: 40rpx;
				position: fixed;

				.left-item {
					display: flex;
					flex-direction: row;
					align-items: center;

					.iconfont {
						width: 60rpx;
						height: 70rpx;
						margin-right: 30rpx;
					}

					.ranking {
						font-size: 46rpx;
						color: #999;
						margin-right: 30rpx;
						font-family: '宋体';
						font-weight: bold;
						margin-left: 20rpx;
					}

					.title {
						font-size: 32rpx;
					}
				}

				.score {
					margin-right: 100rpx;
					color: #999;
				}
			}
		}
	}
</style>